<div class = "comment_info">
    <img src = "http://placehold.it/820x300" alt = "">
    <div>
        <h4 class = "pull-right">{{product?.price}}元</h4>
        <h4>{{product?.title}}</h4>
        <h4>{{product?.desc}}</h4>
        <div>
            <p class = "pull-right"> {{comments?.length}}</p>
            <h4>
                <app-stars [rating] = "product?.rating"></app-stars>
            </h4>
        </div>
    </div>
</div>

<div class = "thumbnail">
    <button class = "btn btn-default btn-lg"
            [class.active] = "isWatched"
            (click) = "watchProduct()">
        {{isWatched ? '取消关注' : '关注'}}
    </button>
    <label>股票的最新竞价：{{currentBid | number:'.2-2'}}元</label>
</div>

<div class = "comment_list ">
    <div>
        <div>
            <button class = "btn btn-success" (click) = "isCommentHide = !isCommentHide">发表评论</button>
        </div>
        <div [hidden] = "isCommentHide">
            <app-stars [(rating)] = "newRating" [readonly] = "false"></app-stars>
            <div><textarea rows = "5" [(ngModel)] = "newComment"></textarea></div>
            <div>
                <button class = "btn" (click) = "addComment()">提交评论</button>
            </div>
        </div>
    </div>

    <div class = "row" *ngFor = "let comment of comments">
        <app-stars [rating] = "comment.rating"></app-stars>
        <div>{{comment.user}}</div>
        <div>{{comment.content}}</div>
        <span class = "pull-right">{{comment.timestamp}}</span>
    </div>

</div>